<template>
  <el-form :model="major" :rules="rules" ref="majorForm" label-width="120px" >
    <el-form-item label="专业代码" prop="id">
      <el-input v-model="major.id" :disabled="props.type!=='add'"></el-input>
    </el-form-item>
    <el-form-item label="专业名称" prop="name">
      <el-input v-model="major.name" :disabled="props.type==='search'"></el-input>
    </el-form-item>
    <el-form-item label="专业必修课" v-if="props.type === 'add'" prop="courses">
      <el-select
          v-model="major.courses"
          multiple
          collapse-tags
          placeholder="Select"
          style="width: 240px"
      >
        <el-option v-for="item in courseOptions" :key="item.courseId" :label="item.name" :value="item.courseId" />
      </el-select>
    </el-form-item>
    <el-form-item label="班级" v-if="props.type === 'search'">
      <el-select
          filterable
          placeholder="展开"
          style="width: 240px"
          :disabled="props.type!=='search'"
      >
        <el-option
            v-for="item in major.classes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="专业必修课" v-if="props.type==='search'">
      <el-select
          filterable
          placeholder="展开"
          style="width: 240px"
      >
        <el-option
            v-for="item in major.courses"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="班级数量" v-if="props.type!=='add'">
      <el-input v-model="major.totalClass" disabled></el-input>
    </el-form-item>
    <el-form-item label="专业人数" v-if="props.type!=='add'">
      <el-input v-model="major.totalStudents" disabled></el-input>
    </el-form-item>
    <el-form-item label="开设学院" prop="collegeId">
      <el-select
          v-model="major.collegeId"
          filterable
          placeholder="Select"
          style="width: 240px"
          :disabled="props.type==='search'"
      >
        <el-option
            v-for="item in collegeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="props.type!== 'search'">
      <el-button @click="emits('visible', false)">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {onMounted, ref} from "vue";
import request from "@/requests/request.js";
import {idStores} from "@/stores/stores.js";
import {ElMessage} from "element-plus";
const emits = defineEmits('visible')
const props = defineProps({
  type: String
})
const major = ref({
  name: "学前教育",
  id: "040106",
  collegeId: 5,
  collegeName: "教育学院",
  totalStudents: 89,
  totalClass: 3,
  courses: [],
  classes: []
})
const courseOptions = ref([])
const setUpCollege = ref('')
const store = idStores()
const majorForm = ref(null)
onMounted(() => {
  request.get('/course/get-course-list').then(res => {
     courseOptions.value = res.data.data
  })
  request.get('/major/get-major', {
    params: {
      id: store.id
    }
  }).then(res => {
    major.value = res.data.data
    setUpCollege.value = major.value.collegeId.toString()
    if(props.type === 'add'){
      setUpCollege.value = ''
      major.value = {
        name: "",
        id: "",
        collegeId: null,
        collegeName: "",
        totalStudents: '',
        totalClass: '',
        classes: [],
        courses: []
      }
    }
  })
})
if(props.type === 'add'){
  major.value = {
    name: "",
    id: "",
    collegeId: '',
    collegeName: "",
    totalStudents: '',
    totalClass: '',
    classes: []
  }
}
const collegeOptions = ref([])
onMounted(() => {
  request.get('/college/get-college-tree').then(res => {
    collegeOptions.value = res.data.data
  })
})
const rules = ref(
    {
      name: [
        {required: true, message: '专业名称不能为空', trigger: 'blur'},
      ],
      id: [
        {required: true, message: '专业代码不能为空', trigger: 'blur'},
      ],
      collegeId: [
        {required: true, message: '请选择学院', trigger: 'blur'},
      ],
      courses: [
          {required: true, message: '请选择必修课', trigger: 'blur'},
      ]
    }
)
const submitForm = () => {
  majorForm.value.validate((valid) => {
    if (valid) {
      if (props.type === 'add') {
        request.post('/major/add-major', {
          major: {
            name: major.value.name,
            majorId: major.value.id,
            collegeId: Number(major.value.collegeId),
          },
          courses: major.value.courses

        }).then(res => {
          emits('visible', false)
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        })
      }
      else if (props.type === 'edit') {
        request.post('/major/update-major', {
          name: major.value.name,
          majorId: major.value.id,
          collegeId: Number(setUpCollege.value),
        }).then(res => {
          if(res.data.code === 200){
            emits('visible', false)
          }
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        })
      }
    }
  })
}
</script>
